<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>WEUI 新闻列表</title>
    <link href="https://cdn.bootcdn.net/ajax/libs/weui/2.6.12/style/weui.min.css" rel="stylesheet">
</head>
<body>
    <!-- navbar -->
    <div class="weui-navbar">
        <a href="http://www.baidu.com" class="weui-navbar__item">推荐</a>
        <a href="#" class="weui-navbar__item weui-bar__item_on">热点</a>
        <a href="#" class="weui-navbar__item">娱乐</a>
    </div>
    
    <!-- searchbar  -->
    <div class="weui-search-bar" id="search_bar">
        <form class="weui-search-bar__form">
            <div class="weui-search-bar__box">
                <i class="weui-icon-search"></i>
                <input type="search" 
                    class="weui-search-bar__input"
                    placeholder="搜索"
                    id="search_input"
                >
                <a href="#" class="weui-icon-clear"></a>
            </div>
            <label 
            id="search_text"
            for="search_input" class="weui-search-bar__label">
                <i class="weui-icon-search"></i>
                <span>搜索</span>
            </label>
        </form>
        <a href="" class="weui-search-bar__cancel-btn">取消</a>
    </div>
    <!-- news-list -->
    <script>
    const tabs = document.querySelectorAll('.weui-navbar__item')
    const navbar = document.querySelector('.weui-navbar')
    const searchInput = document.querySelector('#search_input')
    const searchBar = document.querySelector('.weui-search-bar')
    // 优化了内存

    // 
    document
        .querySelector('.weui-search-bar__label')
        .addEventListener('click', function() {
            searchBar.classList.add('weui-search-bar_focusing')
        })
    searchInput.addEventListener('focus', function(event) {
        console.log('聚焦了')
    })
    // tabs[0].addEventListener('click', function(event) {
    //     console.log('1');
    // })
    navbar.addEventListener('click', function(event) {
        const target = event.target
        if(target.nodeName == 'A') {
            event.preventDefault();
            if (target.classList.contains('weui-bar__item_on')) {    
                return;
            }
            document
                .querySelector('.weui-bar__item_on')
                .classList
                .remove('weui-bar__item_on')
            target.classList.add('weui-bar__item_on')
        }
        // console.log('2');
        // if (event.target.)
    });

    // tabs.addEventListener('click', function() {
    //     console.log('-----');
    // })
    // 同步
    // for (let i = 0; i < tabs.length; i++) {
    //     // 异步...
    //     // (function(i) {
    //         tabs[i].addEventListener('click', function() {
    //             if (this.classList.contains('weui-bar__item_on')) {
    //                 console.log('//////////')
    //                 return;
    //             }
    //             // console.log(i);
    //             document
    //                 .querySelector('.weui-bar__item_on')
    //                 .classList
    //                 .remove('weui-bar__item_on')
    //             this.classList.add('weui-bar__item_on')
    //         })
    //     // })(i)
        
    // }
    </script>
</body>
</html>